import {queryRaffleStrategyRuleWeight} from "@/apis";
import {useEffect, useState} from "react";
import {StrategyRuleWeightVO} from "@/types/StrategyRuleWeightVO";

// @ts-ignore
export function StrategyRuleWeight({refresh}) {

    const [strategyRuleWeightVOList, setStrategyRuleWeightVOList] = useState<StrategyRuleWeightVO[]>([]);

    const queryRaffleStrategyRuleWeightHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const result = await queryRaffleStrategyRuleWeight(String(queryParams.get('userId')), Number(queryParams.get('activityId')));
        const {code, info, data}: { code: string; info: string; data: StrategyRuleWeightVO[] } = await result.json();

        if (code != "0000") {
            window.alert("查询活动账户额度，接口调用失败 code:" + code + " info:" + info)
            return;
        }

        setStrategyRuleWeightVOList(data)
    }

    // 这是你的进度条组件
    // @ts-ignore
    const ProgressBar = ({index, total, completed, awards}) => {
        const percentage = Math.min((completed / total) * 100, 100);
        const isComplete = completed >= total;

        return (
            <div className="space-y-2">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex items-center">
                    <span className="text-sm font-medium text-pink-100 mr-1.5">
                        阶梯 {index + 1}
                    </span>
                        {isComplete && (
                            <span className="text-[10px] bg-rose-500/20 text-rose-300 px-1.5 py-0.5 rounded-full">
                            已完成
                        </span>
                        )}
                    </div>
                    <span className={`text-xs font-mono ${isComplete ? 'text-rose-300' : 'text-pink-200'}`}>
                    {Math.min(completed, total)}/{total}
                </span>
                </div>

                {/* Progress Bar */}
                <div className="relative h-2 bg-pink-900/30 rounded-full overflow-hidden">
                    <div
                        className={`absolute top-0 left-0 h-full rounded-full ${
                            isComplete
                                ? 'bg-gradient-to-r from-rose-400 to-rose-500'
                                : 'bg-gradient-to-r from-pink-400 to-rose-400'
                        }`}
                        style={{width: `${percentage}%`}}
                    >
                        <div className="absolute inset-0 bg-white/5 animate-pulse"></div>
                    </div>
                </div>

                {/* Awards */}
                {awards && (
                    <div className="mt-3 pt-2 border-t border-pink-700/20">
                        <div className="flex items-center mb-1.5">
                            <svg className="w-3 h-3 text-pink-300 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            <span className="text-xs font-medium text-pink-200">必中奖品</span>
                        </div>
                        <div className="grid grid-cols-1 gap-1.5">
                            {awards.map((award, idx) => (
                                <div
                                    key={award.awardId}
                                    className="flex items-center bg-pink-800/20 px-2 py-1.5 rounded-md border border-pink-700/15 text-xs text-pink-50"
                                >
                                    <span className="text-pink-300 mr-1.5 font-mono">{idx + 1}.</span>
                                    <span>{award.awardTitle}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </div>
        );
    };

    useEffect(() => {
        queryRaffleStrategyRuleWeightHandle().then(r => {
        });
    }, [refresh])

    return (
        <div className="flex flex-wrap gap-3 p-3 max-w-2xl mx-auto">
            {strategyRuleWeightVOList.map((ruleWeight, index) => (
                <div
                    key={index}
                    className="flex-1 min-w-0 bg-gradient-to-br from-pink-900/30 to-rose-800/40 rounded-lg p-4 shadow-sm border border-pink-700/30 backdrop-blur-sm"
                >
                    <ProgressBar
                        index={index}
                        total={ruleWeight.ruleWeightCount}
                        completed={ruleWeight.userActivityAccountTotalUseCount}
                        awards={ruleWeight.strategyAwards}
                    />
                </div>
            ))}
        </div>
    );
}